<template>
	<view class="waterfall">
		<view class="item" v-for="(img, index) in images" :key="index">
			<image
				class="artImg"
				:src="img.isVisible ? img.src : placeholder"
				mode="aspectFill"
				:data-index="index"
				@load="onImageLoad"
				ref="lazyImages"
			></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			images: [],
			placeholder: '/static/loading.gif' // 本地占位图路径
		};
	},
	mounted() {
		this.generateRandomImages();
		this.$nextTick(() => {
			this.initLazyLoad();
		});
	},
	methods: {
		generateRandomImages() {
			// 生成20张随机图片
			const imageCount = 40;
			const baseUrl = 'https://picsum.photos'; // 基础URL
			this.images = Array.from({ length: imageCount }, () => ({
				src: `${baseUrl}/${Math.floor(Math.random() * 200 + 200)}/${Math.floor(Math.random() * 300 + 200)}?random=${Math.random()}`, // 随机宽高
				isVisible: false // 初始状态为不可见
			}));
		},
		initLazyLoad() {
			const observer = new IntersectionObserver((entries) => {
				entries.forEach((entry) => {
					if (entry.isIntersecting) {
						const index = entry.target.getAttribute('data-index');
						this.images[index].isVisible = true; // 设置为可见
						observer.unobserve(entry.target); // 停止观察
					}
				});
			}, {
				rootMargin: '0px',
				threshold: 0.5 // 当图片进入可视区域50%时触发
			});

			// 观察所有图片
			this.$refs.lazyImages.forEach((img) => {
				observer.observe(img.$el || img);
			});
		},
		onImageLoad(event) {
			// 图片加载完成后的回调
			const img = event.target;
			img.style.opacity = 1; // 渐显效果
		}
	}
};
</script>


<style>
.waterfall {
	column-count: 2; /* 设置列数 */
	column-gap: 10px; /* 设置列间距 */
}

.item {
	height: 500rpx;
	break-inside: avoid; /* 防止元素被分割到不同的列 */
	margin-bottom: 10px; /* 设置元素之间的间距 */
}

image {
	width: 100%;
	height: 100%;
	border-radius: 8px; /* 可选：设置图片圆角 */
}
</style>